<template>
	<view class="index_container">
		<!-- 头部 -->
		<view class="index_hearder_bg">
			<view class="index_hearder" :style="{paddingTop:point.top+'px',width:point.left+'px'}">
				<text @click="clickCity">{{city}}▼</text>
				<view class="index_hearder_search" :style="{height:point.height+'px',marginRight:'2px'}">
				</view>
				<image @click="clickMap" src="../../static/定位666.png" />
			</view>
		</view>
		<!-- 轮播 -->
		<!-- marginTop:point.bottom+'px' -->
		<swiper :style="{height: '300rpx',}"
		 :indicator-dots="true" indicator-active-color="#fff" circular="true"
		  :autoplay="true" :interval="2000" :duration="800">
			<swiper-item v-for="item in banners" :key="item">
				<image style="width: 100%;height: 100%" :src="item" />
			</swiper-item>
		</swiper>
		<!-- 图标区域 -->
		<view class="index-menus">
			<view v-for="item in menus" :key="item.name" class="index-menus-grid">
				<view class="image" :style="{backgroundColor: item.bg_color}">
					<image :src="'../../static/kkk_' + item.img"></image>

				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 数据 -->
		<view class="Encyclopedias">
			<text>房产权百科</text>
			<view class="Encyclopedias_min">
				<view class="Encyclopedias_image" v-for="item in Encyc" :key="item.name">

				<image :src="'../../static/lh_'+item.image"></image>

				<text>{{item.title}}</text>
			</view>
			</view>
		</view>
		
		<!-- 懒加载 -->
		<view class="main">
			<text>猜你喜欢</text>
			<view class="main_list">
				<view class="main_list_li" v-for="(item,index) in houselist" :key="item.id" @click="clickHouse(item)">
					<image :src="item.imgs"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 到底显示 -->
		<view v-show="isend" class="baseline">
					已经到底了!不要再拉了哟~~~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city: '点击中', //城市
				point: {}, //胶囊按钮的坐标;单位px
				banners: [
					"//img10.360buyimg.com/pop/s590x470_jfs/t1/220389/5/15245/73548/62344962Ee7e6fc80/e4cfb79283de0783.jpg.webp",
					"//img13.360buyimg.com/pop/s590x470_jfs/t1/215640/17/15218/60263/62344e3aEebf971b5/42b1b7998983696f.jpg.webp",
					"//imgcps.jd.com/ling4/100014352543/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e0/aa4d3b1c/cr/s/q.jpg"
				], //轮播图片
				menus: [{
						bg_color: '#4ac283',
						img: '1.png',
						name: '新房'
					},
					{
						bg_color: '#f88f59',
						img: '2.png',
						name: '二手房'
					},
					{
						bg_color: '#f3b160',
						img: '3.png',
						name: '租房'
					},
					{
						bg_color: '#f27676',
						img: '4.png',
						name: '卖房'
					},
					{
						bg_color: '#5d9fff',
						img: '5.png',
						name: '小区房价'
					},
					{
						bg_color: '#646bf9',
						img: '6.png',
						name: '店铺'
					},
					{
						bg_color: '#4dc0a7',
						img: '7.png',
						name: '问答'
					},
					{
						bg_color: '#a658ec',
						img: '8.png',
						name: '海外房产'
					}
				],
				Encyc: [{
						title: "查房价",
						image: "1.png"
				    	}, {
						title: "找经纪人",
						image: "2.png"
					}, {
						title: "百科",
						image: "3.png"
					},
					{
						title: "购房资源",
						image: "4.png"
					},
				],


				curpage: 1, //当前请求的页数
				curpagesize:20,//当前请求的页数的条数
				houselist: [], //房源数据
				houselist2: [], //房源数据2
				// houselist包含数据: {
				// 	area: "仁寿县"
				// 	id: 1
				// 	imgs: "http://129.211.169.131:6368/imgs/1.jpg"
				// 	name: "美的云溪郡"
				// 	point: 117
				// 	price: 9000
				// 	range: "仁寿大道"
				// 	type: "4室2厅"
				// }
				
				isend: false,	//是否到底了!!!
				historylist: []	//历史足迹数组


			};
		},
		onLoad() {
			this.point = uni.getMenuButtonBoundingClientRect();
			// console.log(this.point);
			// bottom: 80
			// height: 32
			// left: 281
			// right: 368
			// top: 48
			// width: 87
			this.getCityLocation(); //获取位置权限
			this.getHouseList();//发房源数据
		},
		onReachBottom() {
					 //防抖  到底了 跳出函数
					if(this.isend) return 
					
					// console.log('我到底了!!!')
					//如果到底加载下一页数据
					this.curpage++
					this.getHouseList()
					
				},
				onPullDownRefresh(){
							// 要实现刷新,只需要在这里把需要重置的值,设置为初始值!
							// this.houselist = []
						// uni.navigateTo({
						// 		url:"../index/index"
						// })
						
								// this.getHouseList()
							console.log('我头被拉了!!!!')
						},
		methods: {
			clickCity(){
							uni.navigateTo({
								url: '../selectcity/selectcity'
							})
						},
				clickMap(){
							//切换路由页面
							// uni.switchTab({
								
							// })
							//跳转到非路由页面-自带返回
							uni.navigateTo({
								url: '../map/map'
							})
							//跳转到非路由页面-关闭当前页面在跳，没有返回
							// uni.redirectTo({
								
							// })
						},
						clickHouse(house){
										//删除数组中的老数据
										for(let i = 0; i < this.historylist.length; i++){
											if(this.historylist[i].id == house.id){
												this.historylist.splice(i,1)
											}
										}
							
										//unshift到头部
										this.historylist.unshift(house)
										uni.setStorageSync('hislist', this.historylist)
										console.log(this.historylist)
									},
						//获取房源
						getHouseList(){
							uni.request({
								url: 'http://129.211.169.131:6368/gethouse',
								data: {
									page: this.curpage,
									pagesize: this.curpagesize
								},
								success: (res) => {
								 	//数组+=不可以 [1,2,3,...[4,5,6]]    
									// let c= a.concat(b) es5的方式
									// this.houselist2=res.data.data
									
									
									if(res.data.data.length == 0){
										//数组加载完了拉到底了
										this.isend = true //把到底表示设置为true
									}else{
										this.houselist.push(...res.data.data)
										console.log(res)
									}

								}
							})
						},
			getCityLocation() {

				// 查看位置
				// uni.openLocation({	
				// longitude: 101.725767,//经度
				// latitude: 26.568038,//维度
				// 	success:(res)=> {
				// 		console.log(res);
				// 	}
				// });
				// 获取位置  要配置小程序的appid 勾选位置接口
				//设计隐私的接口 需要授权
				uni.getLocation({
					success: ({
						longitude,
						latitude
					}) => {
						// console.log(longitude, latitude);

						//调用高德API,把经纬度转为城市地址坐标
						uni.request({
							url: "https://restapi.amap.com/v3/geocode/regeo",
							data: {
								key: "dd77170be19cbdcd710d82b60fc2c795",
								location: longitude + ',' + latitude
							},
							success: (res) => {
								this.city = res.data.regeocode.addressComponent.city
								// console.log(res, "高德转换");
							}
						})
					}
				})


			}
		}
	}
</script>

<style lang="scss">
	@import '../../themes/themes.scss';

	.index_container {
		background-color: #f4f3f9;
		// position: relative;
			
		.index_hearder_bg {
			background-color: $base-color;
			padding-bottom: 10px;
		position:sticky;
		top: 0;
	
			z-index: 555555;
			width: 100%;

			.index_hearder {
				display: flex;
				align-items: center;
				color: $ex-color;

				text {
					margin: 0 5px;
				}

				.index_hearder_search {
					flex: 1;
					background-color: #fff;
					border-radius: 30px;
				}

				image {
					width: 30px;
					height: 30px;
					// margin: 0 0px 0 0;
					
				}
			}


		}

		.index-menus {
			display: flex;
			flex-wrap: wrap;
			background-color: $ex-color;
			padding-top: 15px;
			align-items: center;
			margin-bottom: 20px;

			.index-menus-grid {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 15px;

				.image {
					height: 90rpx;
					width: 90rpx;
					border-radius: 50%;

					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}

				}

				text {
					margin-top: 5px;
					font-size: 24rpx;
				}
			}
		}


		.Encyclopedias {
			background-color: $ex-color;
			padding: 10px 0;
			margin-bottom: 20px;
			&>text {
				font-size: 38rpx;
				font-weight: bold;
				margin-left: 25px;
				color: #3e3d64;
			}
			.Encyclopedias_min{
				display: flex;
				justify-content: space-between;
				.Encyclopedias_image {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 15px;
				image {
					margin-top: 20px;
					width: 50rpx;
					height: 50rpx;
				}

				text {
					margin-top: 5px;
					font-size: 24rpx;
				}
			}
		}
	}
		.main{
			background-color: $ex-color;
			padding-top: 10px;
			// margin-bottom: 20px;
			&>text {
				font-size: 38rpx;
				font-weight: bold;
				margin-left: 25px;
				color: #3e3d64;
			}
			.main_list{
				padding: 15px 40rpx;
				.main_list_li{
					margin-bottom: 8px;
					image{
						width: 240rpx;
						height: 180rpx;
					}
					text{
						font-size: 30rpx;
					}
				}
			}
			
		}
		
		// 底线
.baseline{
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: $ex-color;
}
	}
</style>
